<template>
  <view class="wechat">
    <view class="hander">
      <image src="../../static/zuo1.png" mode="" @click="goback"></image>
      <view class="aaa">微信支付</view>
      <image src="../../static/del.jpg" mode=""></image>
    </view>
    <view class="section">
      <view class="title">跳转微信支付</view>
      <view class="price1">
        <view class="price_1">平台优惠</view>
        <view class="price_2">￥40.00</view>
      </view>
      <view class="price2">
        <view class="price_1">总价</view>
        <view class="price_2">￥40.00</view>
      </view>
    </view>
    <view class="footer" v-if="showpay">
      <view class="footer_top">
        <image
          src="../../static/cancel.png"
          mode=""
          class="cancel"
          @click="cancel"
        ></image>
        <text>使用密码</text>
      </view>
      <view class="name">云上农夫商户平台</view>
      <view class="price">
        <text class="price1">￥</text>
        <text class="price2">320.00</text>
      </view>
      <view class="aaaa">
        <view class="paymodel">
          <view class="paymodel_left">付款方式</view>
          <picker mode="selector" :range="options" @change="handleChange">
            <view class="line">
              <view class="picker">
                {{ selectedValue }}
              </view>
              <view>
                <u-icon
                  name="arrow-down-fill"
                  size="10"
                  color="#ADADAD"
                ></u-icon>
              </view>
            </view>
          </picker>
        </view>
        <view class="paymodel">
          <view class="paymodel_left">付款说明</view>
          <view class="paymodel_left"
            >由腾安公司和中金基金提供基金相关服务</view
          >
        </view>
      </view>
      <view class="newpay" @click="newpay"> 支付 </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showpay: true,
      selectedValue: "零钱通",
      options: ["零钱通", "钱包", "银行卡"],
    };
  },
  methods: {
    cancel() {
      this.showpay = false;
    },
    goback() {
      uni.navigateBack();
    },
    newpay() {
      uni.navigateTo({
        url: "/packageB/pay/paymentsuccess",
      });
    },
    handleChange(e) {
      console.log(555);
      const index = e.detail.value;
      this.selectedValue = this.options[index];
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

page {
  background-color: #f8f8f8;
}

.wechat {
  font-family: "Poppins";
  padding: 80rpx 30rpx 0rpx 30rpx;
}

.hander {
  display: flex;
  align-items: center;

  height: 50rpx;
  margin-bottom: 40rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }

  .aaa {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    font-weight: 600;
  }
}

.section {
  background-color: #fff;
  padding: 20rpx 20rpx 30rpx 20rpx;
  border-radius: 20rpx;

  .title {
    font-size: 30rpx;
    margin-bottom: 30rpx;
  }

  .price1 {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1px solid #ededed;
  }

  .price2 {
    display: flex;
    justify-content: space-between;
  }

  .price_1 {
    color: #bbbbbb;
    font-size: 28rpx;
  }

  .price_2 {
    color: #9a9390;
    font-size: 32rpx;
    font-weight: 600;
  }
}

.footer {
  width: 100%;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  padding-bottom: 50rpx;
  border-radius: 20rpx 20rpx 0rpx 0rpx;

  .footer_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 40rpx;

    .cancel {
      width: 30rpx;
      height: 30rpx;
    }

    text {
      color: #2930ac;
      font-size: 28rpx;
      font-weight: 600;
    }
  }

  .name {
    text-align: center;
    font-size: 30rpx;
    margin-bottom: 20rpx;
  }

  .aaaa {
    margin-bottom: 50rpx;
  }

  .price {
    width: 80%;
    margin: 0 auto 20rpx;
    text-align: center;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #d8d8d8;

    .price1 {
      font-size: 28rpx;
      font-weight: 600;
    }

    .price2 {
      font-size: 36rpx;
      font-weight: 600;
    }
  }

  .paymodel {
    display: flex;
    justify-content: space-between;
    padding: 5rpx 30rpx;
    font-size: 22rpx;
    color: #adadad;
    .line {
      display: flex;
      align-items: center;
    }
    ::v-deep .picker-box {
      height: 40px;
      line-height: 40px;
      background: rgba(255, 255, 255, 0.25);
    }

    select {
      border: none;
      outline: none;
      color: #adadad;
      font-size: 28rpx;

      option {
        border: none;
        outline: none;
        font-size: 28rpx;
      }
    }
  }

  .newpay {
    background: #45af35;
    height: 60rpx;
    color: #fff;
    width: 170rpx;
    text-align: center;
    line-height: 60rpx;
    border-radius: 10rpx;
    margin: 0 auto;
  }
}
</style>